<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        body {
            background: #3CA992;
        }

        .login {
            height: 200px;
            width: 200px;
            margin: 0 auto;
            /* border: 1px solid black; */
            display: flex;
            flex-wrap: wrap;
            align-content: space-around;
            justify-content: space-around;
            font-family: '华文彩云';
        }

        #username {
            height: 30px;
            width: 200px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        #upas {
            height: 30px;
            width: 200px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        #putrandom {
            height: 30px;
            width: 200px;
            border-radius: 5px;
            outline: none;
            border: none;
        }

        .logo {
            width: 342px;
            height: 242px;
            margin: 0 auto;
        }

        .logo img {
            width: 100%
        }

        #btn {
            font-size: 30px;
            line-height: 40px;
            height: 40px;
            width: 80px;
            font-family: '华文彩云';

        }

        #btn2 {
            font-size: 30px;
            line-height: 40px;
            font-family: '华文彩云';
            height: 40px;
            width: 80px;
        }
    </style>
</head>

<body>

    <div class="logo"><img src="../img/login_logo.gif" alt=""></div>
    <div class="login">
        用户名<input type="text" id="username">

        密码<input type="password" id="upas">
        <span id="random"></span>
        <input type="text" id="putrandom">
        <button id="btn">登录</button>
        <button id="btn2">注册</button>
    </div>


















    <script src="../js/tool.js"></script>
    <script>
        randomcode();
       $('#random').onclick=function(){
        randomcode();
       }

        $('#btn').onclick = function () {
            const username = $('#username').value;
            const userpwd = $('#upas').value;
            var txt = document.getElementById('putrandom').value;
            var random=document.getElementById('random').innerHTML;
            var random=random.toLocaleUpperCase();
            var txt = txt.toUpperCase();
            console.log(txt);
            console.log(random);
            
            if (txt != random) {
                alert('验证码输入错误')
                return false;
            }
            if (username && userpwd) {

                ajax({
                    path: '../php/login.php',
                    data: {
                        username,
                        userpwd
                    },
                    type: 'post',
                    successCB: (data) => {

                        // console.log(data)
                        if (data.status) {
                            localStorage.setItem('loginname', username)
                            alert(data.msg);
                            var search=location.search;
                            web=search.split('id=')[1];
                            console.log(userpwd);
                            if(web){
                                location.href = `detail.html?id=${web}`
                            }
                            else{
                                location.href = 'home_page.html';
                            }
                            
                        } else {
                            alert(data.msg)
                        }
                    }
                })
            }
        }

        $('#btn2').onclick = function () {
            location.href = 'reg.html'
        }
    </script>

</body>

</html>